import React, { useState } from "react";
import { Dayjs } from "dayjs";
import { Form, Button, TimePicker, message } from "antd";
import api from "@/fetch"; // 导入封装的 Axios 实例

import "./index.less";

const RecipeTime: React.FC = () => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);

  const onFinish = async (values: {
    reportGenerateCron: Dayjs;
    reportPushCron: Dayjs;
  }) => {
    try {
      setLoading(true);
      console.log(values);
      await api.post("/api/v1/admin/config/config-report-generate-cron", {
        reportGenerateCron: values.reportGenerateCron.format("HH:mm:ss"),
      });
      await api.post("/api/v1/admin/config/config-report-push-cron", {
        reportPushCron: values.reportPushCron.format("HH:mm:ss"),
      });
      message.success("配置时间成功");
    } catch (error) {
      message.error(error?.message || "配置时间失败");
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="recipe-time-container">
      <Form
        form={form}
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 18 }}
        onFinish={onFinish}
      >
        <Form.Item
          label="食谱报告生成时间"
          name="reportGenerateCron"
          rules={[{ required: true, message: "请选择食谱报告生成时间" }]}
        >
          <TimePicker format="HH:mm:ss" placeholder="选择时间" />
        </Form.Item>

        <Form.Item
          label="食谱报告推送时间"
          name="reportPushCron"
          rules={[{ required: true, message: "请选择食谱报告推送时间" }]}
        >
          <TimePicker format="HH:mm:ss" placeholder="选择时间" />
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 6, span: 18 }}>
          <Button type="primary" htmlType="submit" loading={loading}>
            提交
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
};

export default RecipeTime;
